<template>
  <div style="background: #FAFAFA">
    <div class="div1">
      <div class="div2">
        <h1 style="color: white; text-align: center">新闻资讯</h1>
        <h3 style="  color: white; text-align: center; margin-top: 20px">
          为您推荐公司及行业的前沿资讯,让你随时了解行业动态!
        </h3>
        <el-popover
          placement="bottom"
          title="搜索结果"
          width="50%"
          :visible="visible"
        >
          <template #reference>
            <el-input
              @input="inputtest"
              @focus="focus"
              @blur="blur"
              prefix-icon="Search"
              class="input"
              v-model="input"
              placeholder="请输入新闻关键词"
            />
          </template>

          <el-table @cell-click="toNewsPage" :data="Searchnews">
            <el-table-column   property="title" label="标题" />
            <template #empty>
              <el-empty description="description" />
            </template>
          </el-table>
        </el-popover>
      </div>
    </div>
  
  <newsListTop ></newsListTop>
  <newsTags :newsList="news"></newsTags>
  <el-backtop style="background: black;" :right="100" :bottom="100" />
  </div>
</template>

<script setup>
import newsListTop from "./newsListTop.vue";
import newsTags from "./newsTags.vue";
import { GetnewsList, searchnews } from "@/request/home/userapi.js";
import { onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
const input = ref();
const news = ref();
const Router = useRouter()
const visible = ref(false);
const Searchnews = ref();
async function inputtest() {
  visible.value = true;
  if (input.value === "") visible.value = false;
  const result = await searchnews({ keyword: input.value });
  if (result.data.code === 200) Searchnews.value = result.data.result;
}
function blur() {
  visible.value = false;
}
function focus() {
  visible.value = true;
}
const toNewsPage = (row, column, cell, event) => {
    Router.push({
        name:'newpage',
        query:{
            new:JSON.stringify(row)
        }
    })
}
const getAllnews = async () => {
  const result = await GetnewsList();
  news.value = result.data.result;
};
onMounted(async () => {
  getAllnews();

});

</script>

<style scoped>
.div1 {
  background-image: url("@/assets/home.jpg");

  background-size: cover;
  height: 5rem;
  width: 100%;
}
.div2 {

  position: absolute;
  top: 1.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.input {
  width: 50%;
  margin-top: 1rem;
  height: 40px;
}
@media (max-width: 450px) {
  .div2 {
    top: 3rem;
  }
  .input {
    width: 100%;
  }
}
</style>